<style rel="stylesheet/scss" lang="scss" >
.record {
  margin: 20px 0px 0px 0;
  width: 100%;
  display: inline-block;

  .record-header {
    font-weight: 700;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.678431);
  }
  .record-time {
    padding: 4px 10px;
    cursor: pointer;
  }
  .record-time-select {
    color: #ffffff;
    background: #4080ff;
    border-radius: 15px;
    i {
      display: inherit;
    }
  }
  .record-header-right {
    float: right;
  }
  .el-card__body {
    padding-top: 0;
  }
  .record-list {
    height: 250px;
    padding: 0;
    margin: 0;
    list-style: none;
    .listview-body {
      height:220px;
      overflow-y: scroll;
    }
    .record-item {
      cursor: pointer;
      clear: both;
      height: 36px;
      line-height: 36px;
      .record-avatar {
        &:after {
          content: '';
          clear: both;
          display: table;
        }
        img {
          border-radius: 100%;
          vertical-align: middle;
        }
        display: inline-block;
        display: block;
        float: left;
        margin-right: 10px;
      }
      .record-time {
        float: right;
      }
      font-size: 14px;
    }
  }
  .el-tabs {
    .el-tabs__header {
      margin-bottom: inherit;
    }
    .el-tabs__active-bar {
      background-color: #4080ff;
    }
    // .el-tabs__nav-scroll {
    //   padding: 0 px;
    // }
    .el-tabs__item {
      font-weight: 650;
      font-style: normal;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.419607843137255);
      height: 60px;
      line-height: 60px;
    }
    .el-tabs__item.is-active {
      color: #4080ff;
    }
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
  }
  .login-record-dropdown {
    position: absolute;
    right: 0;
    top: 20px;
    margin-right: 20px;
    z-index: 999;
  }
  .record-body {
    position: absolute;
  }
}
</style>
<style>
.record .je-vue-listview .je-vue-pagebar{
  margin-top: 0!important;
}
</style>
<template>
  <el-card
    class="record"
    shadow="never"
    style="height: 344px;"
  >
    <!-- <div slot="header">
      <span class="record-header">登录日志</span>

      <div
        v-show="activeName==='data'"
        class="record-header-right"
      >
        <el-dropdown
          trigger="click"
          @command="handleSelType"
        >
          <span class="record-time record-time-select">
            {{ timeType }}
            <i class="el-icon-caret-bottom" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="日">日</el-dropdown-item>
            <el-dropdown-item command="月">月</el-dropdown-item>
            <el-dropdown-item command="年">年</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>-->
    <div class="record-body">
      <div
        v-show="showTime"
        class="login-record-dropdown"
      >
        <el-dropdown @command="handleSelType">
          <span class="record-time record-time-select">
            {{ timeType }}月
            <i class="el-icon-caret-bottom" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              :command="item"
              v-for="item in 12"
              :key="item"
            >
              {{ item }}月
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        v-loading="isLoading"
        :body-style="{ height: '250px'}"
        element-loading-text="加载中..."
      >
        <el-tab-pane label="登录日志看板">
          <div
            id="record-chart"
            :style="{width: '100%', height: '250px'}"
            style="padding-top: 20px;"
          />
        </el-tab-pane>
        <el-tab-pane label="详情记录">
          <ul class="record-list">
            <je-listview
              ref="list"
              v-loading="loading"
              :total-count="totalCount"
              :page-size="5"
              :empty-height="emptyHeight"
              :item-height="itemHeight"
              @buildData="buildData"
            >
              <!-- 数据项 -->
              <li
                slot="listitem"
                v-for="(item,index) of log"
                :key="index"
                class="record-item"
              >
                <div
                  v-html="getPhoto(item)"
                  class="record-avatar"
                />
                {{ item.LOGINLOG_DLR_NAME }}登录了系统
                <span class="record-time">{{ item.LOGINLOG_DLSJ }}</span>
              </li>
            </je-listview>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>
<script>
import ListView from '../../../../components/listview/listview.vue';
import { fetchLoginCount, fetchLoginLog } from '../../actions/manage';

export default {
  name: 'LoginRecord',
  components: { 'je-listview': ListView },
  data() {
    return {
      activeName: '',
      timeType: '',
      data: [],
      chart: {},
      isLoading: false,
      log: [],
      totalCount: 0, // 总条数，绑定分页条,
      showTime: true,
      emptyHeight: 1200, // 空数据的容器高
      itemHeight: 40, // 数据项高
      // allUser: [],
    };
  },
  computed: {
    photo() {
      return JE.getUserPhoto();
    },
  },
  mounted() {
    this.timeType = new Date().getMonth() + 1;
    setTimeout(() => {
      document.querySelector('#record-chart').style.width = `${document.querySelector('.record').offsetWidth - 40 - 2}px`;
      document.querySelector('.record-body').style.width = `${document.querySelector('.record').offsetWidth - 40 - 2}px`;
      this.chart = window.echarts.init(document.getElementById('record-chart'), 'macarons');
      this.getData();
    }, 0);
    /* this.allUser = JE.ajax({ url: JE.getUrlMaps('je.core.rbac.user.loadUserInfo') });
    Ext.each(this.allUser, (row) => {
      JE.__USERS__[row.USERID] = JE.__USERS__[row.USERCODE] = {
        id: row.USERID, code: row.USERCODE, name: row.USERNAME, photo: row.PHOTO, photoUrl: row.PHOTOURL,
      };
    }); */
    // 人员头像处理
    const me = this;
    if (!JE.isNotEmpty(JE.__USERS__)) {
      $(document).on('mysubscrible', () => {
        me.getLog({
          start: 0,
          limit: 10,
        });
      });
    } else {
      me.getLog({
        start: 0,
        limit: 10,
      });
    }
  },
  methods: {
    buildData(pageInfo) {
      this.getLog(pageInfo);
    },
    getPhoto(item) {
      const user = JE.__USERS__[item.LOGINLOG_DLR_ID] || {};
      let photo = user.photoUrl;
      if (!photo && user.photo) {
        photo = user.photo;
        photo = JE.split(photo, '*')[1];// PHOTOURL
        photo = photo.indexOf('data:image/') == 0 ? photo : JE.getFileUrl(photo);
      }
      if (JE.isNotEmpty(photo)) {
        return `<img class="je-user-photo photo-img" src="${photo}">`;
      }
      let name = user.name || item.LOGINLOG_DLR_NAME || '';
      name = name.length > 2 ? name.substring(name.length - 2) : name;
      return `<div class="je-user-photo photo-text">${name}</div>`;

      // return JE.getUserPhoto(item.LOGINLOG_DLR_ID,true);
    },
    handleClick(tab) {
      if (tab.label === '详情记录') {
        this.showTime = false;
        const pageInfo = {};
        pageInfo.start = 0;
        pageInfo.limit = 10;
        this.getLog(pageInfo);
      } else {
        this.showTime = true;
        this.getData();
      }
    },
    handleSelType(command) {
      this.timeType = command;
      this.getData();
    },
    chartOption() {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        // color: ["#ff9f7f", "#9fe6b8"],
        grid: {
          left: '4%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {
          data: this.data.types,
          x: 'center',
          y: 'top',
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: '#333333',
            },
            axisLine: {
              lineStyle: {
                color: '#cccccc',
              },
            },
            data: this.data.x || [],
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#cccccc',
              },
            },
            axisLabel: {
              color: '#333333',
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
              },
            },
          },
        ],
        minInterval: 1,
        boundaryGap: [0, 0.1],
        series: [
          {
            name: '活跃度',
            type: 'line',
            label: {
              normal: {
                show: true,
                position: 'top',
              },
            },
            data: this.data.cs || [],
          },
          {
            name: '登录人次',
            type: 'line',
            label: {
              normal: {
                show: true,
                position: 'top',
              },
            },
            data: this.data.rs || [],
          },
        ],
      });
    },
    getData() {
      this.isLoading = true;
      const year = new Date().getFullYear();
      let month = this.timeType;
      if (this.timeType < 10) {
        month = `0${this.timeType}`;
      }
      const str = `${year}-${month}`;
      fetchLoginCount({ queryType: 'DAY', dateVal: str }).then((data) => {
        this.isLoading = false;
        this.data = data;
        this.chartOption();
      });
    },
    getLog(pageInfo) {
      this.isLoading = true;
      const params = {
        limit: pageInfo.limit,
        start: pageInfo.start,
      };
      fetchLoginLog(params).then((data) => {
        this.isLoading = false;
        this.log = data.rows;
        this.totalCount = data.totalCount;
      });
    },
  },
};
</script>
